<template>
  <div class="com-container">
    <div class="title" :style="comStyle">
      <span>{{ '▎ ' + showTitle }}</span>
      <span
        class="iconfont title-icon"
        :style="comStyle"
        @click="showChoice = !showChoice"
        >&#xe6eb;</span
      >
      <div class="select-con" v-show="showChoice" :style="marginStyle">
        <div
          class="select-item"
          v-for="item in selectTypes"
          :key="item.key"
          @click="handleSelect(item.key)"
        >
          {{ item.text }}
        </div>
      </div>
    </div>
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { computed, markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import axios from 'axios'
//主题
import data from '../../../static/theme/chalk.json'
import data1 from '../../../static/theme/vintage.json'
import { getThemeValue } from '../../utils/theme_utils'
import { useStore } from 'vuex'
const store = useStore()
const showChoice = ref(false) //选择器显示隐藏
const dataType = ref('map') //类型
const seller_ref = ref(null) //ref
const chartInstance = ref(null) //实例化
const allData = ref(null) //总数据
let titleFontSize = ref(0) //标题字体
//动态监听数值
const selectTypes = computed(() => {
  if (!allData.value) {
    return []
  } else {
    return allData.value.type.filter((item) => {
      return item.text !== showTitle.value
    })
  }
})
//标题
const showTitle = computed(() => {
  if (!allData.value) {
    return ''
  } else {
    return allData.value[dataType.value].title
  }
})
const comStyle = computed(() => {
  return {
    fontSize: titleFontSize.value + 'px',
    color: getThemeValue(store.state.visual.theme).titleColor
  }
})
const marginStyle = computed(() => {
  return {
    marginLeft: titleFontSize.value + 3 + 'px'
  }
})
//选择器事件
const handleSelect = (key) => {
  dataType.value = key
  updateChart()
  showChoice.value = false
}
// 初始化echartInstance对象
const initChart = () => {
  //初始化主题
  echarts.registerTheme('chalk', data)
  echarts.registerTheme('vintage', data1)
  //解决报错 用 markRaw淘一下转成不是响应式的
  chartInstance.value = markRaw(
    echarts.init(seller_ref.value, store.state.visual.theme)
  )
  const initOption = {
    //设置图标坐标
    grid: {
      top: '35%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true // 距离是包含坐标轴上的文字
    },
    //boundaryGap为缝隙
    xAxis: {
      type: 'category',
      boundaryGap: false
    },
    yAxis: {
      type: 'value'
    },
    legend: {
      top: '15%',
      icon: 'circle',
      left: 30
    },
    //滑动样式
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(41, 52, 65, 1)',
      borderWidth: 0.5,
      axisPointer: {
        type: 'line',
        z: 0,
        lineStyle: {
          type: 'solid',
          opacity: 0.3
        }
      }
    }
  }
  chartInstance.value.setOption(initOption)
}

//获取数据
const getData = () => {
  axios.get('../../../static/data/trend.json').then((res) => {
    allData.value = res.data
    console.log(allData)
    updateChart()
    // startInterval()
  })
}
//更新图表
const updateChart = () => {
  const colorArr1 = [
    'rgba(11, 168, 44, 0.5)',
    'rgba(44, 110, 255, 0.5)',
    'rgba(22, 242, 217, 0.5)',
    'rgba(254, 33, 30, 0.5)',
    'rgba(250, 105, 0, 0.5)'
  ]
  // 全透明的颜色值
  const colorArr2 = [
    'rgba(11, 168, 44, 0)',
    'rgba(44, 110, 255, 0)',
    'rgba(22, 242, 217, 0)',
    'rgba(254, 33, 30, 0)',
    'rgba(250, 105, 0, 0)'
  ]
  //类目轴的数据
  const timeArr = allData.value.common.month
  //y轴的数据
  const valueArr = allData.value[dataType.value].data
  const seriesArr = valueArr.map((item, index) => {
    return {
      name: item.name,
      type: 'line',
      data: item.data,
      stack: dataType.value,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: colorArr1[index]
          },
          {
            offset: 1,
            color: colorArr2[index]
          }
        ])
      }
    }
  })
  const legendArr = valueArr.map((item) => item.name)
  const dataOption = {
    xAxis: {
      data: timeArr
    },
    series: seriesArr,
    legend: {
      data: legendArr
    }
  }
  chartInstance.value.setOption(dataOption)
}

// 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
const screenAdapter = () => {
  titleFontSize.value = (seller_ref.value.offsetWidth / 100) * 5
  //分辨率大小相关的配置项
  const adapterOption = {
    legend: {
      itemWidth: titleFontSize.value,
      itemHeight: titleFontSize.value,
      itemGap: titleFontSize.value,
      textStyle: {
        fontSize: titleFontSize.value / 2
      }
    }
  }
  chartInstance.value.setOption(adapterOption)
  chartInstance.value.resize()
}
onMounted(() => {
  //初始化配置
  initChart()
  //初始化数配置
  getData()
  window.onresize = screenAdapter
  //   初始化分辨率配置
  screenAdapter()
})
onBeforeUnmount(() => {
  //   clearInterval(timerId)
  window.onresize = null
})
defineExpose({
  screenAdapter
})
watch(
  () => store.state.visual.theme,
  () => {
    chartInstance.value.dispose()
    initChart() // 重新以最新的主题名称初始化图表对象
    screenAdapter() // 完成屏幕的适配
    updateChart() // 更新图表的展示
  }
)
</script>

<style lang="scss" scoped>
.com-container {
  position: relative;
}
.title {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 10;
  color: white;
  .title-icon {
    margin-left: 10px;
    cursor: pointer;
  }
  .select-item {
    cursor: pointer;
  }
  .select-con {
    background-color: rgba(41, 52, 65, 0.5);
  }
}
</style>
